<template>
  <div style="padding: 0.2rem">
    <div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 100%"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <!-- 活动基本信息 -->
        <P style="margin-bottom: 0.1rem">基本活动信息</P>
        <div style="display: flex; flex-wrap: wrap; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动名称:" prop="activity_name" required>
            <el-input v-model="ruleForm.activity_name" style="width: 1.7rem" />
          </el-form-item>
          <el-form-item label="活动类型：" prop="activity_type" required>
            <el-select
              v-model="ruleForm.activity_type"
              placeholder="请选择活动类型"
              style="width: 1.7rem"
            >
              <el-option label="线上活动" value="线上活动" />
              <el-option label="线下活动" value="线下活动" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动开始时间：" required>
            <el-date-picker
              style="width: 1.7rem"
              v-model="ruleForm.activity_Begin_time"
              type="datetime"
              placeholder="请选择活动开始时间"
            />
          </el-form-item>

          <el-form-item label="活动结束时间：" required>
            <el-date-picker
              style="width: 1.7rem"
              v-model="ruleForm.activity_end_time"
              type="datetime"
              placeholder="请选择活动结束时间"
            />
          </el-form-item>
        </div>

        <!-- 活动限制-->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动限制</p>
        <div style="box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动定义" prop="Activity_Definition">
            <el-checkbox-group v-model="ruleForm.Activity_Definition">
              <el-checkbox value="宣传活动" name="Activity_Definition"> 宣传活动 </el-checkbox>
              <el-checkbox value="vip专属活动" name="Activity_Definition">
                vip专属活动
              </el-checkbox>
              <el-checkbox value="福利发放活动：" name="Activity_Definition">
                福利发放活动
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="参与活动人员等级限制：" prop="Activity_Level_Restrictions">
            <el-checkbox-group v-model="ruleForm.Activity_Level_Restrictions">
              <el-checkbox value="vip1" name="Activity_Level_Restrictions"> vip1 </el-checkbox>
              <el-checkbox value="vip2" name="Activity_Level_Restrictions"> vip2 </el-checkbox>
              <el-checkbox value="vip3" name="Activity_Level_Restrictions"> vip3 </el-checkbox>
              <el-checkbox value="vip4" name="Activity_Level_Restrictions"> vip4 </el-checkbox>
              <el-checkbox value="vip5" name="Activity_Level_Restrictions"> vip5 </el-checkbox>
              <el-checkbox value="svip" name="Activity_Level_Restrictions"> svip </el-checkbox>
              <el-checkbox value="贫民" name="Activity_Level_Restrictions"> 贫民 </el-checkbox>
              <el-checkbox value="均可" name="Activity_Level_Restrictions"> 均可 </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!-- 活动详情 -->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动详情信息</p>
        <div style="margin-bottom: 0.1rem; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动资源：" prop="Activity_Resources">
            <el-radio-group v-model="ruleForm.Activity_Resources">
              <el-radio value="赞助">赞助</el-radio>
              <el-radio value="自营">自营</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动描述：" prop="activity_describe">
            <el-input
              v-model="ruleForm.activity_describe"
              type="textarea"
              style="width: 2rem"
              rows="10"
            />
          </el-form-item>

          <el-form-item label="活动图片：" prop="desc">
            <el-upload
              style="border: 1px solid black"
              class="avatar-uploader"
              action="http://localhost:3000/dqj_user/uploadimg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img style="width: 300px" v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </div>
        <!-- 活动奖品 -->
        <p style="margin-top: 0.2rem; margin-bottom: 0.1rem">活动奖品</p>
        <div style="margin-bottom: 0.1rem; box-shadow: 0 0 0.05rem #ccc; padding: 0.2rem">
          <el-form-item label="活动奖品：" prop="active_jiangpin">
            <el-form-item label="一等奖" prop="active_jiangpin.one_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.one_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="二等奖" prop="active_jiangpin.two_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.two_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="三等奖" prop="active_jiangpin.three_jiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.three_jiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
            <el-form-item label="安慰奖" prop="active_jiangpin.anweijiangpin">
              <el-input
                v-model="ruleForm.active_jiangpin.anweijiangpin"
                type="textarea"
                style="width: 2rem;margin-bottom: 0.15rem"
              />
            </el-form-item>
          </el-form-item>
        </div>
        <el-form-item>
          <div class="buttom">
            <el-button
              style="width: 200px; height: 40px"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              发布
            </el-button>
            <el-button style="width: 200px; height: 40px" @click="resetForm(ruleFormRef)"
              >重置</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { addActivity } from '@/request/api/api.ts'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  ruleForm.activity_img = response.msg
}

interface RuleForm {
  activity_name: string
  activity_type: string
  activity_Begin_time: string
  activity_end_time: string
  Activity_Definition: string[]
  Activity_Level_Restrictions: string[]
  Activity_Resources: string[]
  activity_describe: string
  activity_img: string
  Active_istrue: Boolean
  active_jiangpin: object
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  activity_name: '',
  activity_type: '', //活动类型
  activity_Begin_time: '', //活动开始时间
  activity_end_time: '', //活动结束时间
  Activity_Definition: [], //活动定义
  Activity_Level_Restrictions: [], //等级限制
  Activity_Resources: [], //资源
  activity_describe: '', //活动描述
  activity_img: '', //活动图片
  Active_istrue: false,
  active_jiangpin: {
    one_jiangpin: '',
    two_jiangpin: '',
    three_jiangpin: '',
    anweijiangpin: ''
  }
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change'
    }
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change'
    }
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change'
    }
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change'
    }
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change'
    }
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change'
    }
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change'
    }
  ],
  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  let data = await addActivity(ruleForm)
  if (data.code == 200) {
    ElMessage({
      message: `${data.msg}`,
      type: 'success'
    })
    resetForm(ruleFormRef.value)
    imageUrl.value = ''
  }
  console.log(ruleForm)
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}))
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px solid yellow;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.buttom{
  width: 100%;
  display: flex;
  justify-content: center;
}

.avatar-uploader {
  border: 1px solid rgb(200, 200, 200);
  margin-left: 10px;
}

.avatar-uploader .el-upload {
  background-color: black;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.bottom {
  width: 100%;
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}

form .el-input{
    height: 40px;
}
form .el-form-item{
  font-weight: 700;
}
p{
  font-weight: 700;
}
</style>